<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <script src="./vue.js"></script>
</head>

<body>

<div id="story" style="width: 600px;border: solid;border-color: blueviolet;border-radius:1.5ex;">
   
    <div align="center" >
        <h1 align=" center">我爱的故事</h1>
        <input type="text" v-bind:value="poetry[0].value"><button id="show" type="button"
            @click="flag=!flag">{{flag?"收起":"展开"}}</button>
    </div>
    <div v-show="flag" v-for=" s in poetry" :key="s.name">
        {{s.value}}
    </div>

</div>

    <script>
        new Vue({
            el: "#story",
            data: {
                flag: false,
                poetry: [{ "name": "0", "value": "春夜喜雨" },
                { "name": "1", "value": "好雨知时节" }, {
                    "name": "2"
                    , "value": "当春乃发生"
                }, { "name": "3", "value": "随风潜入夜" }, {
                    "name": "4"
                    , "value": " 润物细无声"
                }, { "name": "5", "value": "野径云俱黑" }, {
                    "name": "6", "value"
                        : "江船火独明"
                }, { "name": "7", "value": "晓看红湿处" }, {
                    "name": "8", "value"
                        : "花重锦官城"
                }, 
            ]}
        }) 
    </script>
</body>

</html>